import React, {memo, useEffect} from 'react';
import {shallowEqual, useDispatch, useSelector} from "react-redux";

import {getTopBannerAction} from "./store/actionCreators";

import Lunbo from "./c-cpns/lunbo";
import RecommendLeft from "./c-cpns/recommend-left";
import RecommendRight from "./c-cpns/recommend-right";

import {RecommendDiv} from './style';

function Recommend(props) {
  //当我们使用useSelector这个hook函数时,
  // 当我们的数据发生变化时,它会将组件全部重新渲染,
  // 那么这个时候就会影响性能,这个时候我们就要使用 shallowEqual

  const {topBanners}=useSelector((state) => ({
    //由于我们使用了Immutable,所以此时的state是一个对象,我们需要通过get来获取数据
    topBanners:state.get("recommend").get("topBanners"),//获取数据
  }),shallowEqual);
// const {getBanner,topBanners} = props;

  // useEffect(()=>{
  //   getBanner();
  // },[getBanner]);

  //组件和redux关联,获取数据和进行操作
  const dispatch=useDispatch();
  useEffect(()=>{
      dispatch(getTopBannerAction());
  },[dispatch]);


    return (
        <RecommendDiv>
        {/* 引入轮播图部分,并且将轮播图的数据传递过去 */}
          <Lunbo topBanners={topBanners} />
          <div className="recommendContent">
            <RecommendLeft/>
            <RecommendRight/>
          </div>

        </RecommendDiv>
    );
}


// const mapStateToProps=(state)=>({
//   topBanners:state.recommend.topBanners,//一定要从 state.recommend 中获取数据
// })
//
// const mapDispatchToProps=dispatch =>({
//   getBanner:()=>{
//    dispatch(getTopBannerAction());
//   }
// })

// export default connect(mapStateToProps,mapDispatchToProps)(memo(Recommend));
export default memo(Recommend);